<template>
	<view class="page-container">
		<view>
			<u-cell-group>
				<u-text :text="title" bold="true" size="20"></u-text>
				<u-text :text="subTitle[curIndex].desc" block="true" size="20"></u-text>
			</u-cell-group>
			<u-steps :current="curIndex" dot>
				<u-steps-item v-for="item in subTitle" :title="item.title" :desc="item.questNumStr"></u-steps-item>
			</u-steps>
			<view style="margin: 10px">
				<u-cell :title="subQuest[curQuestIndex].quest"></u-cell>
				<u-radio-group v-model="selectedOption" placement="column">
					<u-radio v-for="(index, option) in subQuest[curQuestIndex].options" :key="index" :label="option.text" :value="option.text">
						{{ option.text }}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view style="margin-bottom: 30px;margin-left: 15px;margin-right: 15px;">
			<u-row justify="space-between" gutter="10">
				<u-col span="4">
					<u-button type="primary" :plain="true" hairline="true" @click="prevQuestion">上一题</u-button>
				</u-col>
				<u-col span="4">
					<u-button type="warning" hairline="true" @click="skipQuestion">
						<text style="margin-right: 16px;">跳</text>过
					</u-button>
				</u-col>
				<u-col span="4">
					<u-button type="primary" hairline="true" @click="nextQuestion">下一题</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import { ref } from 'vue';
	
	export default {
	  setup() {
	    // 问题分区
		const curIndex = ref(0);
		const title = ref('营养推荐');
	    const subTitle = ref([
			{ index: 0, title: "基础信息", questNumStr: "共4题", desc: "基础信息对于制定个性化营养建议十分重要，测评会根据性别、年龄等信息为您定制专属营养推荐", length: 15 },
			{ index: 1, title: "膳食习惯", questNumStr: "共10题", desc: "", length: 35 },
			{ index: 2, title: "运动习惯", questNumStr: "共10题", desc: "", length: 25 },
			{ index: 3, title: "健康状况", questNumStr: "共10题", desc: "", length: 25 },
	    ]);
	
		// 问题
		const curQuestIndex = ref(0);
	    const subQuest = ref([
	        { quest: "身高cm体重kg：", type: 3, options: [{ type: 1, text: "男" }, { type: 2, text: "女" }] },
	        { quest: "站姿体前屈：", type: 1, options: [
				{ type: 1, text: "无法触地" }, { type: 2, text: "手指触地" }, 
				{ type: 3, text: "手掌触地" }, { type: 4, text: "手肘触地(有句话不知当讲不当讲)" }] },
	        { quest: "引体向上数量：", type: 1, options: [
				{ type: 1, text: "0-1个(错的不是瓦塌西)" }, { type: 2, text: "10个体测及格" }, 
				{ type: 3, text: "20个+(oi小鬼有点火热啊)" }, { type: 4, text: "30个体测满分" }] },
	        { quest: "俯卧撑数量：", type: 1, options: [
				{ type: 1, text: "蝴蝶振翅<8个(专注的样子最有魅力)" }, { type: 2, text: "10个+" },
				{ type: 1, text: "10个做组4组(你是个诚实的孩子)" }, { type: 2, text: "30个+" }] },
			{ quest: "1000m(男)/800m(女)跑最佳成绩：", type: 1, options: [
				{ type: 1, text: "睡眠问题" }, { type: 2, text: "饮食问题" }] },
			{ quest: "每周运动频率：", type: 1, options: [
				{ type: 1, text: "微信步数3000以内" }, { type: 2, text: "单车通勤是我最大的努力" }, { type: 3, text: "每周健身3+次（无氧运动）" }, 
				{ type: 4, text: "每周跑步3+次（有氧运动）" }, { type: 5, text: "每周无氧+有氧>5次（教练你好）" }] },
	    ]);
		
	    const subtitle = ref('请回答以下问题');
	    const progress = ref(50); // 假设进度为50%
	    const question = ref('你最喜欢的编程语言是什么？');
	    const options = ref([
			'JavaScript',
			'Python',
			'Java',
			'C#'
	    ]);
	    const selectedOption = ref('');
	
	    // 方法
	    const prevQuestion = () => {
	      if (currentQuestionIndex.value > 0) {
	        currentQuestionIndex.value--;
	      }
	    };
	
	    const skipQuestion = () => {
	      // 跳过当前问题的处理逻辑
	    };
	
	    const nextQuestion = () => {
	      if (currentQuestionIndex.value < (options.value.length / 4) - 1) {
	        currentQuestionIndex.value++;
	      }
	    };
	
	    // 将响应式数据和方法返回给模板
	    return {
			curIndex,
			curQuestIndex,
			title,
			subTitle,
			subQuest,
			progress,
			question,
			options,
			selectedOption,
			prevQuestion,
			skipQuestion,
			nextQuestion
	    };
	  }
	};
</script>

<style scoped>
.page-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
</style>
